<template>
  <div name="gallery-panel" class="gallery-panel row q-pa-sm">
    <q-img
      class="col col-4"
      v-for="image in images"
      :key="image.url"
      :src="image.url"
      ratio="1"
    />
  </div>
</template>
<script lang="ts">
import { Vue, Component } from 'vue-property-decorator';
@Component({
  name: 'gallery-panel',
})
export default class GalleryPanel extends Vue {
  private images = [
    {
      name: 'Image Name',
      url: 'static/pngs/61622233_10156997879016211_9071568878793916416_o.png',
    },
    {
      name: 'Image Name',
      url: 'static/pngs/bryan-lee-greenshell.png',
    },
    {
      name: 'Image Name',
      url: 'static/pngs/bryan-lee-redshell-lr.png',
    },
    {
      name: 'Image Name',
      url: 'static/pngs/cover.png',
    },
    {
      name: 'Image Name',
      url: 'static/pngs/bryan-lee-yellowshell-hr.png',
    },
    {
      name: 'Image Name',
      url: 'static/pngs/RetroRobot_Full_LR.png',
    },
  ];
}
</script>
<style lang="stylus" scoped>
.gallery-panel {
  background-color: $blue-grey-8;
  font-size: 12px;
  min-height: 100px;
}
</style>
